<template>
	<view class="myTicket">
		<template v-if="pacList.length > 0">
			<ul v-for="(item,index) in pacList" :key="index" :class="item.status == 'Y'?'ticket bg-line-color':'ticket'">
				<li class="name">{{item.typedesc}}</li>
				<li>有效期至{{item.endDate}}</li>
				<li>{{item.instruction}}</li>
				<li style="height:52rpx;">
					<view class="status">{{ item.status == 'Y'?'未使用':'已使用' }}</view>
					<view class="btn" v-if="item.status == 'Y'" @click="canPaySubmit(item)">去使用</view>
				</li>
			</ul>
		</template>
		<view v-else style="margin-top:35vh">
			<uv-empty mode="coupon" icon="https://wx.sijiyoufu.com/static/imgs/project/couponEmpty.png"></uv-empty>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { getCouponList } from "@/api/coupon"
import {ref , getCurrentInstance} from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const canPaySubmit = (res : any) => {
    if(res.type == 'LB'){
		uni.reLaunch({url:'/pages/mall/index'})
	}else{
		uni.reLaunch({url:'/pages/movie/index'})
	}
}
const pacList = ref<any>([])
const pageType = ref<any>('')
onLoad(async (options) => {
	pageType.value = options.type
	const { proxy } = getCurrentInstance();
    await proxy.$onLaunched;
	getCouponList({}).then(res => {
		pacList.value = res.data.filter(item => {return item.type == pageType.value})
	})
})
</script>

<style lang="scss" scoped>
	.myTicket{
	    width: 92%;
		margin: 0 auto;
		overflow: hidden;
		padding:32rpx 0;
	}
	.ticket{
		width:100%;
		margin-bottom:32rpx;
		padding:32rpx;
		box-sizing: border-box;
		border-radius: 9px;
		color:#fff;
		position: relative;
		background:#d3d2d2;
		.name{
			padding-bottom:16rpx;
			font-weight: 600;
		}
		.btn{
			width:160rpx;
			height:50rpx;
			line-height:50rpx;
			background:#fff;
			color:$uni-color-primary;
			text-align:center;
			border-radius:9px;
			position: absolute;
			bottom:32rpx;
			right:32rpx;
		}
		.status{
			position: absolute;
			background: #fff;
			border-top-right-radius: 9px;
			height: 36rpx;
			width: 129rpx;
			line-height: 36rpx;
			font-size: 28rpx;
			color: #ccc;
			text-align: center;
			right: 0;
			top: 0;
			border-bottom-left-radius: 9px;
		}
	}
	
</style>